<template>
    <div class="container">
      <!-- 导航条 -->
      <div id="slider" class="mui-slider">
				<div id="sliderSegmentedControl" class="mui-scroll-wrapper mui-slider-indicator mui-segmented-control mui-segmented-control-inverted">
					<div class="mui-scroll">
						<a class="mui-control-item mui-active" href="#item1mobile" data-wid="tab-top-subpage-1.html">
							推荐
						</a>
						<a class="mui-control-item" href="#item2mobile" data-wid="tab-top-subpage-2.html">
							热点
						</a>
						<a class="mui-control-item" href="#item3mobile" data-wid="tab-top-subpage-3.html">
							北京
						</a>
						<a class="mui-control-item" href="#item4mobile" data-wid="tab-top-subpage-4.html">
							社会
						</a>
						<a class="mui-control-item" href="#item5mobile" data-wid="tab-top-subpage-5.html">
							娱乐
						</a>
                        <a class="mui-control-item" href="#item5mobile" data-wid="tab-top-subpage-5.html">
							科技
						</a>
					</div>
				</div>
	   </div>

       <!-- 图片列表 -->
       <router-link to="/home/photoinfo" tag="ul">
         <li>
           <img src="../../images/tuijian.jpg">
         </li>
         <div class="dibu">
             <div class="title">
                 <h1>现代简约</h1>
             </div>
             <div class="miaosu">
                 如果你想在装修过程中省心一些，那就请你费一些银子吧。省心的办法不是没有，只是看你肯不肯选罢了。找一家声誉好的大型装修公司全包。
             </div>
         </div>
      </router-link>

    </div>
</template>

<script>
    //导入mui的JS文件
    import mui from '../../lib/mui/js/mui.js'

    export default{
        data(){
            return{
               cates:[],
               list:[],
               cateid:''
            }
        },
        // created(){
        //     getPhotoCates(),
        //     getPhotoList()
        // },
        mounted(){
          //初始化滑动控件
          mui('.mui-scroll-wrapper').scroll({
	         deceleration: 0.0005 //flick 减速系数，系数越大，滚动速度越慢，滚动距离越小，默认值0.0006
           });
        }
        // methods:{
        //     //获取图片分类数据
        //     getPhotoCates(){
        //         this.$http.get('api/getimgcategory').then(function(result){
        //            if(result.body.status===0){
        //                //把获取到的数据保存在cates中
        //                this.cates=result.body.message.unshit({ title:"全部", id:0 });
        //                this.cateid=result.body.message.id;
        //            }
        //         })
        //     },
        //     //获取图片列表
        //     getPhotoList(cateid){
        //         this.$http.get('api/getimages/'+cateid).then(result=>{
        //             if(result.body.status===o){
        //                 //把获取到的数据保存到list中
        //                 this.list=result.body.message
        //             }
        //         })
        //     }
        // }
    }
</script>

<style lang="less" scoped>
    *{
        touch-action: pan-y;
    }

    .container{
        padding: 10px;
        ul{
            padding:0px;
            list-style-type: none;
            box-shadow: 0 0 6px #999;
            position: relative;
            img{
                width: 100%;    
                height: 300px;
            }
            .dibu{
                position:absolute;
                bottom:0px;
                color:white;
                text-align: left;
                max-height: 84px;
                background-color: rgba(0,0,0,0.4);
                .title{
                   font-size: 14px;
                }
                .miaosu{
                  color:white;
                  font-size: 13px;
                }
            }
        }
    }
</style>

